<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>活动首页</title>
    <!-- 引入样式 -->
    <link rel="shortcut icon" href="../../../images/favicon.ico">
    <link rel="stylesheet" href="../../../plugins/element-ui/index.css"/>
    <link rel="stylesheet" href="../../../styles/common.css"/>
    <link rel="stylesheet" href="../../../styles/page.css"/>
    <link rel="stylesheet" href="../../../styles/bttn.min.css"/>
    <link rel="stylesheet" href="../../../styles/indexF.css"/>
    <link rel="stylesheet" type="text/css" href="../../../styles/input/css/normalize.css"/>
    <link rel="stylesheet" type="text/css" href="../../../styles/input/fonts/font-awesome-4.2.0/css/font-awesome.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../../styles/input/css/demo.css"/>
    <link rel="stylesheet" type="text/css" href="../../../styles/input/css/component.css"/>
    <style>
        #member-app .notAdmin::after {
            border: 0 !important;
        }

    </style>
    <style>
    </style>
</head>
<body style="background-color: #ffffff;overflow-x: hidden;">
<div class="dashboard-container" id="activity-app">
    <template>
    <el-backtop target=".dashboard-container" :bottom="100" :visibility-height="200" style="width: 80px;height: 30px">
        <div
                style="{
        height: 100%;
        width: 100%;
        background-color: #f2f5f6;
        box-shadow: 0 0 6px rgba(0,0,0, .12);
        text-align: center;
        line-height: 40px;
        color: #1989fa;
      }"
        >
            <i class="el-icon-top">置顶</i>
        </div>

    </el-backtop>
    </template>
    <el-header>
            <el-menu :default-active="defAct" mode="horizontal" style="margin-left: 50px">
                <el-menu-item index="1">
                    <div style="margin-right: 20px">
                        <img src="../../../images/front.webp" style="width: 283.8px;height: 60px">
                    </div>
                </el-menu-item>
                <el-menu-item
                        v-for="item in menuList"
                        :index="item.id"
                        :key="item.id"
                        @click="menuHandle(item)"
                        style="margin-left: 80px"
                >
                    <span slot="title" style="font-size: 30px">{{item.name}}</span>
                </el-menu-item>
                <el-menu-item>
                    <el-button icon="el-icon-switch-button" round @click="logout()">
                    <span style="font-size: 20px">
                        注销
                    </span>
                    </el-button>
                </el-menu-item>

            </el-menu>
    </el-header>
    <div class="container">
        <img src="../../../images/act.jpg" style="width: 558px;height: 110px;margin-left: 100px">
        <el-carousel :interval="3000" type="card" height="250px" style="margin-left: 100px">
            <el-carousel-item v-for="imgItem in imgList" style="background-color: white !important;width: 300px;margin-left: 150px">
<!--                <div style="margin: auto;position: absolute;top: 0;left: 0;right: 0;bottom: 0;text-align: center;">-->
                    <img :src="srcHandle(imgItem.activityCover)" width="250px" height="250px" @click="handleDialog(imgItem)">
<!--                </div>-->
            </el-carousel-item>
        </el-carousel>
        <div class="tableBar">
            <div class="infinite-list" v-infinite-scroll="load" style="overflow:auto;width: 1280px">
                <div class="col-3 input-effect" style="width: 400px">
                <el-input v-model="SearchInput"
                          placeholder="请输入活动名称搜索"
                          style="width: 250px;height: 50px;margin-left: 150px;"
                          clearable
                          class="effect-16"
                          @keyup.enter.native="handleQuery"
                >
                    <i slot="prefix"
                       class="el-input__icon el-icon-search"
                       style="cursor: pointer"
                       @click="handleQuery"
                    ></i>
                </el-input>
                </div>
                <el-row style="margin-left: 100px">
                    <img src="../../../images/cover.jpg" style="width: 161.55px;height: 45px;margin-left:20px">
                    <img src="../../../images/title.jpg" style="width: 161.55px;height: 45px;margin-left:20px">
                    <img src="../../../images/date.jpg" style="width: 161.55px;height: 45px;margin-left:20px">
                    <img src="../../../images/intro.jpg" style="width: 161.55px;height: 45px;margin-left:20px">
                </el-row>
                <el-table
                        :data="tableData"
                        :show-header="Hstatus"
                        style="width: 1090px;margin-left: 150px"
                        :row-style="{height:'200px'}"
                >
                    <el-table-column
                            prop="activityCover"
                            width="180"
                            label="活动封面"
                            >
<!--                        <span slot="label" style="font-size: 30px">-->
<!--                            活动封面-->
<!--                        </span>-->
                        <template slot-scope="scope">
                            <img
                                    v-if="imageUrl"
                                    :src="imageUrlHandle(scope.row.activityCover)"
                                    class="avatar"
                                    style="width: 100px;height: 100px"
                            ></img>
                            <i
                                    v-else
                                    class="el-icon-plus avatar-uploader-icon"
                            ></i>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="activityTitle"
                            width="180"
                            >
                        <template slot-scope="scope">
                            <div style="font-size: 20px">
                                {{ scope.row.activityTitle}}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="activityDate"
                            width="180">
                        <template slot-scope="scope">
                            <div style="font-size: 20px">
                                {{ scope.row.activityDate}}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="activityIntro"
                            width="180">
                        <template slot-scope="scope">
                            <div style="font-size: 20px">
                                {{ scope.row.activityIntro}}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column width="100">
                        <template slot-scope="scope">
                            <el-button type="text" size="medium" class="blueBug" @click="handleDialog(scope.row)"
                                       icon="el-icon-info">
                                <span style="font-size: 15px;font-weight: bolder">
                                    活动详情
                                </span>
                            </el-button>
                        </template>
                    </el-table-column>
                    <el-table-column>
                        <template slot-scope="scope">
                            <el-button @click="regisHandle(scope.row.id)" v-if="scope.row.isEngaged == 'false' "
                                       type="primary" round>
                                <span style="font-size: 16px;font-weight: bolder">
                                    报名
                                </span>
                            </el-button>
                            <el-button type="success" icon="el-icon-check" v-if="scope.row.isEngaged == 'true' " round>
                                <span style="font-size: 16px;font-weight: bolder">
                                    已报名
                                </span>
                            </el-button>
                            <el-button type="warning" v-if="scope.row.isEngaged == 'true' " round
                                       @click="cancelRegisHandle(scope.row.id)">
                                <span style="font-size: 16px;font-weight: bolder;color:#ffffff;">
                                    取消报名
                                </span>
                            </el-button>
                        </template>
                    </el-table-column>
                    <el-dialog
                            title="详细信息"
                            :visible.sync="dialogVisible"
                            width="50%"
                            append-to-body
                    >
                        <div style="height: 300px">
                                <span slot="label" style="font-size: 20px;color: #002f64;font-weight: bolder">
                                    活动名称: {{this.dialogTitle}}
                                </span>
                            <br/><br/>
                            <span slot="label" style="font-size: 20px;color: #002f64;font-weight: bolder">
                                        活动地点: {{this.dialogAdd}}
                                    </span>
                            <br/><br/>
                            <span slot="label" style="font-size: 20px;color: #002f64;font-weight: bolder">
                                    活动日期: {{this.dialogDate}}
                                </span>
                            <br/><br/>
                            <span slot="label" style="font-size: 20px;color: #002f64;font-weight: bolder">
                                        活动开始时间: {{this.dialogBTime}}
                                    </span>
                            <br/><br/>
                            <span slot="label" style="font-size: 20px;color: #002f64;font-weight: bolder">
                                        活动结束时间: {{this.dialogETime}}
                                    </span>
                            <br/><br/>
                            <span slot="label" style="font-size: 20px;color: #002f64;font-weight: bolder">
                                    活动内容: {{this.dialogContent}}
                                </span>
                            <br/><br/>
                            <span slot="label" style="font-size: 20px;color: #002f64;font-weight: bolder">
                                        发布者: {{this.dialogPub}}
                                    </span>
                            <br/><br/>
                        </div>
                        <span slot="footer" class="dialog-footer">
                                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                              </span>
                    </el-dialog>
                </el-table>
            </div>
        </div>
    </div>
    <el-footer>
        <div style="margin-left: 700px;font-size: 20px;color: black;font-weight: bolder">
            xupt@04204006
        </div>
    </el-footer>
</div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../../plugins/axios/axios.min.js"></script>
<script src="../../../js/request.js"></script>
<script src="../../../api/activity.js"></script>
<script src="../../../api/volunteer.js"></script>
<script src="../../../api/match.js"></script>
<script src="../../../js/index.js"></script>
<script>
    new Vue({
        el: '#activity-app',
        data() {
            return {
                Hstatus: false,
                SearchInput: '',
                counts: 0,
                page: 1,
                pageSize: 10,
                tableData: [],
                id: '',
                activityStatus: '',
                matchInfo: {
                    activityId: '',
                    volunteerId: ''
                },
                allOrOwn: '',
                imageUrl: '/common/download?name=',
                dialogVisible: false,
                dialogTitle: '',
                dialogAdd: '',
                dialogDate: '',
                dialogBTime: '',
                dialogETime: '',
                dialogContent: '',
                dialogPub: '',
                imgList: [],
                defAct: '2',
                menuList: [
                    {
                        id: '2',
                        name: '活动首页',
                        //activity————————————————————————————————————————————————————————member
                        url: 'list.html',
                        icon: 'icon-member'
                    },
                    {
                        id: '3',
                        name: '我的活动',
                        url: 'ownList.html',
                        icon: 'icon-category'
                    },
                    {
                        id: '4',
                        name: '账号信息',
                        url: 'info.html',
                        icon: 'icon-category'
                    },
                ],
                //activity————————————————————————————————————————————————————————member
                iframeUrl: 'page/volunteerCenter/list.html',
                loading: false,
                timer: null,

            }
        },
        computed: {},
        created() {
            if (window.localStorage.getItem('userInfo') === null) {
                window.location.href = '../../login/loginFront.html'
            }
            this.init()
            this.imgInit()
            this.userId = JSON.parse(localStorage.getItem('userInfo')).id
        },
        mounted() {
        },
        methods: {
            async init() {
                const params = {
                    page: this.page,
                    pageSize: this.pageSize,
                    activityName: this.SearchInput ? this.SearchInput : '',
                    volunteerId: JSON.parse(localStorage.getItem('userInfo')).id,
                    allOrOwn: 'all'
                }
                await getUserActivityList(params).then(res => {
                    if (String(res.code) === '1') {
                        this.tableData = res.data || []
                        this.counts = res.data.length
                    }
                }).catch(err => {
                    this.$message.error('请求出错了：' + err)
                })
            },
            async imgInit() {
                await publishAct().then(res => {
                    if (String(res.code) === '1') {
                    for (let i = 0; i < res.data.length; i++) {
                        this.imgList[i] = res.data[i]
                    }
                    }
                })
            },
            handleQuery() {
                this.page = 1;
                this.init();
            },
            regisHandle(ActId) {
                this.matchInfo.activityId = ActId
                this.matchInfo.volunteerId = this.userId
                this.$confirm('确认报名?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'info'
                }).then(() => {
                    regis(this.matchInfo).then(res => {
                        if (String(res.code) === '1') {
                            this.$message({
                                type: 'success',
                                message: '报名成功!'
                            });
                            this.init()
                        }
                    }).catch(err => {
                        this.$message.error('请求出错了：' + err)
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消报名'
                    });
                });
            },
            handleSizeChange(val) {
                this.pageSize = val
                this.init()
            },
            handleCurrentChange(val) {
                this.page = val
                this.init()
            },
            cancelRegisHandle(st) {
                const params = {
                    volunteerId: this.userId,
                    activityId: st
                }
                this.$confirm('确认取消报名?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    cancelRegis(params).then(res => {
                        if (String(res.code) === '1') {
                            this.$message({
                                type: 'success',
                                message: '取消报名成功!'
                            });
                            this.init()
                        }
                    }).catch(err => {
                        this.$message.error('请求出错了：' + err)
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
                this.init()
            },
            load() {

            },
            imageUrlHandle(url) {
                return '/common/download?name=' + url;
            },
            handleDialog(st) {
                this.dialogTitle = st.activityTitle
                this.dialogAdd = st.activityAddress
                this.dialogDate = st.activityDate
                this.dialogBTime = st.activityBtime
                this.dialogETime = st.activityEtime
                this.dialogContent = st.activityContent
                getVolunteer(st.publisherId).then(res => {
                    this.dialogPub = res.data.volunteerName;
                })
                this.dialogVisible = true
            },

            srcHandle(st) {
                console.log("srcHandle=====")
                return '/common/download?name=' + st;
            },
            // ---------------------

            logout() {
                logoutApi().then((res) => {
                    if (res.code === 1) {
                        localStorage.removeItem('userInfo')
                        window.location.href = '../../login/loginFront.html'
                    }
                })
            },
            menuHandle(item) {
                this.loading = true
                this.menuActived = item.id
                this.iframeUrl = item.url
                window.location.href = item.url
                this.closeLoading()
            },
            closeLoading() {
                this.timer = null
                this.timer = setTimeout(() => {
                    this.loading = false
                }, 1000)
            },

        }
    })
</script>
</body>
</html>